import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/novel/FictionViewModel.dart';
import 'package:provider/provider.dart';

import 'FictionPage.dart';

class NovelPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _NovelState();
}

class _NovelState extends State<NovelPage> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (_) => FictionViewModel(),
        child: Consumer<FictionViewModel>(
            builder: (cContext, model, child) => Column(
                  children: [
                    //搜索
                    searchView(model),
                    //listView
                    exListView(model)
                  ],
                )));
  }

  ///列表栏
  Expanded exListView(FictionViewModel model) {
    return Expanded(
        child: ListView.builder(
      itemCount: model.list.length,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          FictionPage(fictionData: model.list[index])));
            },
            child: Container(
              margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
              padding: EdgeInsets.fromLTRB(0, 0, 16, 0),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 3)]),
              child: Row(
                children: [
                  //图片
                  headImage(model, index),
                  //内容
                  contentText(model, index)
                ],
              ),
            ));
      },
    ));
  }

  ///搜索栏
  Container searchView(FictionViewModel model) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 12, 16, 12),
      child: Row(
        children: [
          Expanded(
              flex: 5,
              child: TextField(
                  textInputAction: TextInputAction.search,
                  onSubmitted: (text) {
                    debugPrint("搜索目标：$text");
                    model.getFictionList(text);
                  },
                  decoration: InputDecoration(
                      labelText: "搜索",
                      icon: Icon(Icons.search),
                      border: OutlineInputBorder(),
                      helperText: "请输入小说/作者/分类")))
        ],
      ),
    );
  }

  ///小说item内容
  Expanded contentText(FictionViewModel model, int index) {
    return Expanded(
        child: Container(
      margin: EdgeInsets.fromLTRB(0, 16, 0, 16),
      child: Column(
        children: [
          //标题栏
          Row(
            children: [
              //标题
              Expanded(
                  child: Container(
                margin: EdgeInsets.fromLTRB(0, 0, 16, 6),
                child: Text(model.list[index].title,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 16, color: Colors.black)),
                constraints: BoxConstraints(maxWidth: 180),
              )),
              //作者
              Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.fromLTRB(0, 0, 0, 6),
                  child: Text(model.list[index].author,
                      style: TextStyle(fontSize: 12, color: Colors.grey)))
            ],
          ),
          //详情栏
          Container(
            child: Text(
              model.list[index].descs,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(color: Colors.blueGrey, fontSize: 12),
              maxLines: 3,
            ),
          ),
          //时间
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.fromLTRB(0, 6, 8, 0),
            child: Text(
              "最后更新：${model.list[index].updateTime}",
              style: TextStyle(color: Colors.grey, fontSize: 10),
            ),
          )
        ],
      ),
    ));
  }

  ///小说item图片布局
  Container headImage(FictionViewModel model, int index) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
      width: 66,
      child: ClipRRect(
        //圆角
        borderRadius: BorderRadius.circular(10),
        child: Image.network(model.list[index].cover),
      ),
    );
  }
}
